<template>
  <div class="netImg">
    <fireComponents style="display: none"></fireComponents>
    <div class="clickList">
      <div class="checkViewImgDiv" @click="viewImgClick()">
        <img v-if="smallbig == 1" class="checkViewImgPath" :src="checkViewImgPath3" />
        <img v-if="smallbig == 2" class="checkViewImgPath" :src="checkViewImgPath2" />
        <img v-if="smallbig == 3" class="checkViewImgPath" :src="checkViewImgPath1" />
      </div>
      <div class="checkViewTxt" @click="viewImgClick()">
        切换视图
        <span class="checkViewSmallTxt">点击图片上传</span>
      </div>
    </div>
    <div class="imgArea">
      <div class="imgList" :style="imgCss" v-for="(item, index) in imgList" :key="item">
        <img
          :src="imgPath+item"
          :width="imgWidth"
          :height="imgHeight"
          @click="isClick && uploadImg(item,index)"
        />
      </div>
    </div>
    <fireComponents ref="childName" :fatherImgSrc="fatherImgSrc"></fireComponents>
  </div>
</template>

<script>
import img1 from '../../assets/images/netImg/1.png'
import img2 from '../../assets/images/netImg/2.png'
import img3 from '../../assets/images/netImg/3.png'
import { method } from '../../assets/js/alert'
import fireComponents from '@/components/newComp/fireComponents'
export default {
  name: 'netImg',
  data () {
    return {
      checkViewImgPath1: img1,
      checkViewImgPath2: img2,
      checkViewImgPath3: img3,
      imgCss: 'width:160px;height:100px;background-color:#666666;overflow:hidden;border-radius: 10px;margin-buttom:20px;margin-bottom: 10px;',
      imgWidth: '160px',
      imgHeight: '100px',
      imgPath: 'api/',
      imgList: [],
      smallbig: '2',
      fatherImgSrc: '',
      isClick: true
    }
  },
  components: {
    fireComponents
  },
  created () {
    this.getImgList()
    method()
  },
  methods: {
    getImgList () {
      var url = 'api/scanfile.php'
      this.axios.get(url).then((res) => {
        this.imgList = res.data
      })
    },
    viewImgClick () {
      if (this.smallbig === '1') {
        this.smallbig = '2'
        this.imgWidth = '160px'
        this.imgHeight = '100px'
        this.imgCss = 'width:160px;height:100px;background-color:#666666;overflow:hidden;border-radius: 10px;margin-buttom:20px;margin-bottom: 10px;'

        return false
      }
      if (this.smallbig === '2') {
        this.smallbig = '3'
        this.imgWidth = '300px'
        this.imgHeight = '170px'
        this.imgCss = 'width:300px;height:170px;background-color:#666666;overflow:hidden;border-radius: 10px;margin-buttom:20px;margin-bottom: 10px;'
        return false
      }
      if (this.smallbig === '3') {
        this.smallbig = '1'
        this.imgWidth = '110px'
        this.imgHeight = '70px'
        this.imgCss = 'width:110px;height:70px;background-color:#666666;overflow:hidden;border-radius: 10px;margin-buttom:20px;margin-bottom: 10px;'

        return false
      }
    },
    uploadImg (item, index) {
      window.ontouchmove = function (e) {
        e.preventDefault && e.preventDefault()
        e.returnValue = false
        e.stopPropagation && e.stopPropagation(); return false
      }
      this.isClick = false
      var fatherimg = this.imgPath + this.imgList[index]
      this.fatherImgSrc = fatherimg
      var url = 'api/server.php'
      var gender = 2
      var data = new FormData()
      data.append('name', 'http://192.168.1.122:87/' + item)
      data.append('gender', gender)
      // var data = { 'name': 'api/' + item, 'gender': gender }
      this.axios.post(url, data).then((res) => {
        if (res.data.issuccess === true) {
          this.timerName = setInterval(() => {
            this.$refs.childName.init()
            window.clearInterval(this.timerName)
            this.timerName = null
            this.isClick = true
          }, 1)
          // alert('图片上传成功')
        } else {
          alert('图片上传失败')
        }
      }).catch((res) => {
        alert('请求失败')
      })
    }
  }
}
</script>

<style scoped>
.netImg {
  /* height: 3008px; */
  width: 750px;
  background-color: #f5f5f5;
  position: relative;
}
.clickList {
  display: flex;
  height: 99px;
  line-height: 99px;
}
.checkViewImgDiv {
  margin-top: 5px;
}
.checkViewImgPath {
  margin-left: 50px;
  width: 30px;
}
.checkBoxTxt {
  font-size: 30px;
  font-family: "思源黑体";
  color: #666666;
}
.checkViewTxt {
  margin-left: 10px;
  margin-top: -3px;
  font-size: 35px;
  font-family: "思源黑体";
  color: #756969;
}
.checkViewSmallTxt {
  margin-left: 50px;
  font-size: 30px;
  color: #0775fd;
}
.imgArea {
  width: 688px;
  /* height: 1209px; */
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
</style>
